<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
       .el-submenu .el-menu-item {
            background-image: linear-gradient(#e8e8e8,#00ff00);
           color: #000000;
        }

    </style>
</head>
<body>
<div id="app">

    <el-container>
        <el-header style="background-color: #0096dc">
            <h1 style="font-size: 22px;color: white ;text-align: center">
                汇福聚财物业管理有限公司后台管理系统

            </h1>
        </el-header>
        <el-container >
            <el-aside width="200px" >
                <el-menu @select="handleSelect" style="background-color: #666666" >
                    <el-submenu index="1" >
                        <template slot="title"><i class="el-icon-s-flag"></i>小区管理</template>
                        <el-menu-item index="1-1" >小区管理</el-menu-item>
                    </el-submenu>

                    <el-submenu index="2" >
                        <template slot="title"><i class="el-icon-s-flag"></i>业主信息管理</template>
                        <el-menu-item index="2-1" >车辆管理</el-menu-item>
                        <el-menu-item index="2-2" >人员管理</el-menu-item>
                        <el-menu-item index="2-3" >宠物管理</el-menu-item>
                    </el-submenu>

                    <el-submenu index="3" >
                        <template slot="title"><i class="el-icon-s-flag"></i>停车位管理</template>
                        <el-menu-item index="1-1">车位管理</el-menu-item>
                        <el-menu-item index="1-1">车位使用管理</el-menu-item>
                    </el-submenu>


                    <el-submenu index="4" >
                        <template slot="title"><i class="el-icon-picture"></i>服务管理</template>
                        <el-menu-item index="2-1">活动管理</el-menu-item>
                        <el-menu-item index="2-2">投诉管理</el-menu-item>
                        <el-menu-item index="2-3">保修管理</el-menu-item>
                        <el-menu-item index="2-4">信箱管理</el-menu-item>
                    </el-submenu>

                    <el-submenu index="5" >
                        <template slot="title"><i class="el-icon-picture"></i>资产管理</template>
                        <el-menu-item index="3-1">资产设备列表</el-menu-item>

                    </el-submenu>
                    <el-submenu index="6" >
                        <template slot="title"><i class="el-icon-shopping-cart-2"></i>收费管理</template>
                        <el-menu-item index="4-1">收费项目</el-menu-item>
                        <el-menu-item index="4-2">收费明细管理</el-menu-item>
                    </el-submenu>
                    <el-submenu index="7">
                        <template slot="title"><i class="el-icon-shopping-cart-2"></i>管理员管理</template>
                        <el-menu-item index="4-1">管理员列表</el-menu-item>
                        <el-menu-item index="4-2">用户组管理</el-menu-item>
                    </el-submenu>
                </el-menu>
            </el-aside>

            <el-main>

                <!--车位管理开始-->
                <div v-if="currentIndex=='2-1'" style="margin: 10px;">
                    <div  style="font-size: 40px;overflow: hidden">
                        <i  class="el-icon-s-fold" style="float:left;" ></i>
                        <el-breadcrumb separator-class="el-icon-arrow-right" style="margin: 10px 100px;font-size:20px" >
                            <el-breadcrumb-item >系统管理管理</el-breadcrumb-item>
                            <el-breadcrumb-item :to="{ path: '/' }">车位管理</el-breadcrumb-item>
                            <el-breadcrumb-item>投诉管理</el-breadcrumb-item>
                            <el-breadcrumb-item>新闻管理</el-breadcrumb-item>
                            <el-breadcrumb-item>业主管理</el-breadcrumb-item>
                            <el-breadcrumb-item>设备维修管理</el-breadcrumb-item>
                            <el-breadcrumb-item>欠费管理</el-breadcrumb-item>
                        </el-breadcrumb>

                    </div>
                    <strong>车牌号</strong><input type="text" name="text" placeholder="请输入车牌号">
                    <strong>住户名</strong><input type="text" name="nema" placeholder="住户名">
                    <button type="submit">查找</button>
                    <button type="reset">重置</button>
                    <br  >
                    <div  style="margin: 20PX">
                        <el-tag >新建</el-tag>
                        <el-tag>修改</el-tag>
                        <el-tag>删除</el-tag>
                    </div>

                    <el-table  :data="categoryArr" style="width: 100%;margin:10px">
                        <el-table-column prop="id" label="编号" width="180"></el-table-column>
                        <el-table-column prop="CarNumber" label="车牌号" width="180"></el-table-column>
                        <el-table-column prop="name" label="住户名" width="180"></el-table-column>
                        <el-table-column prop="address" label="住户地址"></el-table-column>
                        <el-table-column prop="cost" label="费用"></el-table-column>
                        <el-table-column prop="notes" label="备注"></el-table-column>
                        <el-table-column prop="StareTime" label="开始时间"></el-table-column>
                        <el-table-column prop="EndTime" label="结束时间"></el-table-column>
                        <el-table-column prop="operate" label="操作"></el-table-column>
                    </el-table>
                </div>
                <!--车位管理结束-->

<!--                首页开始-->
                <div  v-if="currentIndex=='1-1'" style="overflow: hidden" >
                    <h1 style="margin: 0 0 0 500px;font-size: 50px">物业管理首页</h1>
                    <div style="padding: 20px">
                        <div style="float: left;margin: 0 0 0 200px  ">
                            <i class="el-icon-s-shop" style="border: #0096dc 1px solid;font-size: 80px;background-color: #0096dc"></i>
                            <p>总栋数:60</p>
                        </div>
                        <div style="float: left ;margin: 0 0 0 300px " >
                            <i class="el-icon-office-building" style="border: #0096dc 1px solid;font-size: 80px;background-color: #0096dc"></i>
                            <p>总户数：300人</p>
                        </div>
                        <div style="float: left ;margin: 0 0 0 300px ">
                            <i class="el-icon-s-check" style="border: #0096dc 1px solid;font-size: 80px;background-color: #0096dc"></i>
                            <p>总人数：3000人</p>
                        </div>
                        <div style="float: left ;margin: 0 0 0 300px ">
                            <i class="el-icon-s-custom" style="border: #0096dc 1px solid;font-size: 80px;background-color: #0096dc"></i>
                            <p>租户数量：1000人</p>
                        </div>

                    </div>

                    <!--                首页结束-->






                </div>




            </el-main>



        </el-container>
    </el-container>

</div>
</body>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                currentIndex:"1-1",
                categoryArr:[{id:1,CarNumber:"皖A98918",name:"老张",address:"上海徐汇",cost:1000,note:"无",StareTime:"2021-2-02",EndTime:"2022-2-02",operate:"无" },
                    {id:2,CarNumber:"皖A45871",name:"老王",address:"上海徐汇",cost:1000,note:"无",StareTime:"2021-2-02",EndTime:"2022-2-02",operate:"无" },
                    {id:3,CarNumber:"皖A15484",name:"老李",address:"上海徐汇",cost:1000,note:"无",StareTime:"2021-2-02",EndTime:"2022-2-02",operate:"无" },
                    {id:4,CarNumber:"皖A15484",name:"老刘",address:"上海徐汇",cost:1000,note:"无",StareTime:"2021-2-02",EndTime:"2022-2-02",operate:"无" },
                    {id:5,CarNumber:"皖A15842",name:"老崔",address:"上海徐汇",cost:1000,note:"无",StareTime:"2021-2-02",EndTime:"2022-2-02",operate:"无" },
                    {id:6,CarNumber:"皖A15481",name:"老付",address:"上海徐汇",cost:1000,note:"无",StareTime:"2021-2-02",EndTime:"2022-2-02",operate:"无" },
                    {id:7,CarNumber:"皖A15482",name:"老鬼",address:"上海徐汇",cost:1000,note:"无",StareTime:"2021-2-02",EndTime:"2022-2-02",operate:"无" },
                ]

            }


        },
        methods:{
        categoryDelete(i,c){
            v.categoryArr.splice(i,1);
            v.$message.success("成功删除"+c.name+"分类!");
        },
        bannerDelete(i,b){
            v.bannerArr.splice(i,1);
            v.$message.success("删除成功!");
        },
        productDelete(i,p){
            v.productArr.splice(i,1);
            v.$message.success("删除成功!");
        },
        handleSelect(key,keyPath){
            //记录当前用户点击的导航菜单的位置
            v.$message.success("key="+key);
            v.currentIndex = key;


        }
    }
    })
</script>
</html>